<template>
  <div class="record-list">
    <a-card :bordered="false" style="width: 100%">
      <div slot="title">
        <a-icon type="left" class="mr10" @click="onReturn" />
        <span>{{ recordTitle }}</span>
      </div>
      <a-table
        :columns="recordColumns"
        :scroll="{ x: 1000 }"
        :data-source="recordList"
        :rowKey="(record) => record.id"
        :loading="isLoading"
        :pagination="{
          showTotal: () => `总共${pagination.total}条`,
          showQuickJumper: true,
          showSizeChanger: true,
          total: pagination.total,
          current: pagination.currentPage,
          pageSize: pagination.pageSize,
        }"
        @change="onTableChange"
      >
      </a-table>
    </a-card>
  </div>
</template>

<script>
import Cookie from "js-cookie";
import * as config from "@/services/userManage.js";
import {
  removeOrgColumns,
  removeOrganizerColumns,
  inviteColumns,
  identityColumns,
  CRUMBS_MAP,
  SERVICE_FUNC,
  DATA_MAP
} from "../data";

export default {
  name: "recordList",
  components: {},
  data() {
    return {
      isLoading: false,
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      recordList: []
    };
  },
  watch: {},
  mounted() {
    this.initList();
  },
  computed: {
    recordTitle() {
      let key = +this.$route.query.key;
      let queryName = this.$route.query.name
        ? decodeURIComponent(this.$route.query.name)
        : "";
      let roleName = this.$route.query.roleName
        ? decodeURIComponent(this.$route.query.roleName)
        : "";
      let title = CRUMBS_MAP[key] || "";
      if (roleName) {
        title = `${queryName} / ${roleName} / ${CRUMBS_MAP[key]}`;
      } else {
        title = queryName ? `${queryName} / ${CRUMBS_MAP[key]}` : CRUMBS_MAP[key];
      }
      console.log(queryName)
      return title;
    },
    recordColumns() {
      let columns;
      let key = this.$route.query.key;
      switch (key) {
        case "4":
          columns = removeOrgColumns;
          break;
        case "5":
          columns = removeOrganizerColumns;
          break;
        case "6":
          columns = inviteColumns;
          break;
        case "7":
          columns = identityColumns;
          break;
      }
      return columns;
    }
  },
  methods: {
    async initList() {
      this.isLoading = true;
      let key = +this.$route.query.key;
      let params = this.handleParams();
      let Func = SERVICE_FUNC[key];
      try {
        const {
          data: { data, code }
        } = await config[Func](params);
        this.isLoading = false;
        if (code === 200) {
          this.recordList = data[DATA_MAP[key]] || [];
          this.pagination.total = data.total || 0;
        }
      } catch (error) {
        this.isLoading = false;
      }
    },
    handleParams() {
      let obj;
      let { id, key, roleId } = this.$route.query;
      switch (key) {
        case "4":
          obj = {
            departmentId: Cookie.get("departmentId")
          };
          break;
        case "5":
          obj = roleId ? { roleId, departmentId: id } : { departmentId: id };
          break;
        case "6": {
          obj = {
            departmentId: id
          };
          break;
        }
        case "7":
          obj = {
            departmentId: id,
            roleId
          };
          break;
      }
      let params = {
        ...this.pagination,
        ...obj
      };
      Object.prototype.hasOwnProperty.call(params, 'total') && delete params.total;
      return params;
    },
    onTableChange({ current, pageSize }) {
      this.pagination.currentPage = current;
      this.pagination.pageSize = pageSize;
      this.initList();
    },
    onReturn() {
      this.$router.go(-1)
      // let { key, id, name, roleName, roleId } = this.$route.query;
      // let path = "/car-team/system-qiankun/departmentManage-qiankun";
      // switch (key) {
      //   case "4":
      //     this.$router.push(path);
      //     break;
      //   case "5":
      //     if (roleId) {
      //       this.$router.push({ path, query: { key: 2, id, name, roleName, roleId } });
      //     }
      //     else {
      //       this.$router.push({ path, query: { key: 2, id, name } });
      //     }
      //     break;
      //   case "6":
      //     this.$router.push({ path, query: { key: 2, id, name}});
      //     break;
      //   case "7":
      //     this.$router.push({ path, query: { key: 3, id, name}});
      // }
    }
  }
};
</script>

<style lang="less" scoped>
.record-list {
  ::v-deep .ant-card-head-title {
    font-weight: 600;
    padding: 12px 0;
    font-size: 18px;
  }
  .record {
    position: absolute;
    left: 24px;
    bottom: 28px;
    color: #3d6cf7;
  }
}
</style>
